
/* 1em = 16px */
/* xl lg md sm */

// responsive break point
@function rbp($key) {
    @return map-get($rbp, $key);
}

@function gt-rbp($key) {
    @return 'min-width: ' + rbp($key);
}

@function lt-rbp($key) {
    @return 'max-width: ' + rbp($key);
}

.ic-hidden {
    display: none;
    /* flex 与 none 的冲突，试图使用以下属性解决： */
    width: 0; height: 0; opacity: 0;
    visibility: hidden;
}

/* < 576px */
@media screen and (lt-rbp(sm)) {
    .ic-xs-hidden {display: none !important; }
    .ic-xs { display: inherit; width: auto; height: auto; opacity: unset; visibility: inherit; }
}

/* > 576px */
@media screen and (gt-rbp(sm)) and (lt-rbp(md)) {
    .ic-sm-hidden { display: none !important; }
    .ic-sm { display: inherit; width: auto; height: auto; opacity: unset; visibility: inherit; }
}

/* > 768px */
@media screen and (gt-rbp(md)) and (lt-rbp(lg)) {
    .ic-md-hidden { display: none !important; }
    .ic-md { display: inherit; width: auto; height: auto; opacity: unset; visibility: inherit; }
}

/* > 1024px */
@media screen and (gt-rbp(lg)) and (lt-rbp(xl)) {
    .ic-lg-hidden { display: none !important; }
    .ic-lg { display: inherit; width: auto; height: auto; opacity: unset; visibility: inherit; }
}

/* > 1280px */
@media screen and (gt-rbp(xl)) {
    .ic-xl-hidden { display: none !important; }
    .ic-xl { display: inherit; width: auto; height: auto; opacity: unset; visibility: inherit; }
}
